<template>
    <div id="big">
      <div id="bgc">
        <div id="header">
          <div id="fir">
                <span id="one"><img src="@/imgs/fenlei.png" alt=""></span>
                <span id="two"><img src="@/imgs/shouye.gif" alt=""></span>
                <span id="three"><img src="@/imgs/denglu.png" alt=""></span>
          </div>
          <div id="shuru">
            <input type="text">
          </div>
        </div>  
      </div>
      <div id="lunbo">
        <div id="fu">
            <div v-for="(v,i) in arr" :key="i" id="box">
                <img :src="v.img" alt="">
                <span id="wenzi">{{v.title}}</span>
            </div>
        </div>
    </div>
    </div>
    
  </template>
  
  <script>
  import img1 from "@/imgs/01.png"
  import img2 from "@/imgs/02.png"
  import img3 from "@/imgs/03.png"
  import img4 from "@/imgs/04.png"
  import img5 from "@/imgs/05.png"
  import img6 from "@/imgs/06.png"
  import img7 from "@/imgs/07.png"
  import img8 from "@/imgs/08.png"
  import img9 from "@/imgs/09.png"
  import img10 from "@/imgs/10.png"
  export default {
    data(){
        return{
            arr:[
                {img:img1,title:'苏宁家电'},
                {img:img2,title:'苏宁超市'},
                {img:img3,title:'苏宁宜品'},
                {img:img4,title:'手机数码'},
                {img:img5,title:'家居家装'},
                {img:img6,title:'服饰百货'},
                {img:img7,title:'生活家电'},
                {img:img8,title:'签到有礼'},
                {img:img9,title:'领券中心'},
                {img:img10,title:'更多频道'},
                
            ]
        }
    }
  }
  </script>
  
  <style scoped lang="scss">
    #header{
        width: 100%;
        background: url(@/imgs/headbg.jpg) no-repeat; height: 0.9rem;
        background-size: 100%;
        font-size: 0.16rem;
    }
    #fir{
        width: 90%;
        margin: auto;
        display: flex;
        justify-content: space-between;
        flex:1;
        #two{
            img{
                width: 1.95rem;
                height: 0.38rem;
            }
        }
    }
    #fir span:nth-child(3){
        margin-right: 0.1rem;
    }
    #shuru{
        margin: auto;
    }
    html{
        width: 100%;
    }
    #big{
        font-size: 0.16rem;
    }
    #fu{
        display: flex;
        flex-flow: wrap;
        flex-shrink: 0;
    }
    #header img{
        width: 0.18rem;
        height: 0.3rem;
    }
    input{
        width: 3.51rem;
        height: 0.34rem;
        border-radius: 50px;
        margin-left: 0.1rem;
        border: 0ch;
    }
    #lunbo{
        background: url(@/imgs/bg.jpg) no-repeat;
        background-size: 100%;
        width: 3.75rem;
        height: 1.54rem;
        #box{
            width: 20%;
            height: 0.71rem;
            text-align: center;
            img{
            width: 0.42rem;
            }
        }
        
    }
    #wenzi{
        display: inline-block;
        font-size: 0.12rem;
        text-align: center;
    }
  </style>